<template>
  <div class="uploadImg">
		<div class="tips">为保障账户及资金安全，请填写真实有效的身份信息</div>
		<div class="uploadimg">
       <div class="left same">
        <div v-show="sfzload=='LOADING'">
          <div class="identity loadTb"></div>
          <span>身份证正面</span>
        </div>
        <div v-show="sfzload=='AFTERLOAD'">
          <div class="identity">
            <img :src="sfzimg" alt="" style="width:100%;height:100%;">
          </div>
          <span>身份证正面</span>
        </div>
        <van-uploader v-show="sfzload=='BEFORELOAD'" :max-count="1" :after-read="afterReadSfz" :before-read="beforeReadSfz">
          <div class="identity zm"></div>
				  <span>身份证正面</span>
        </van-uploader>
      </div>
      <div class="right same">
        <div v-show="tbload=='LOADING'">
          <div class="identity loadTb"></div>
          <span>淘宝淘气值</span>
        </div>
        <div v-show="tbload=='AFTERLOAD'">
          <div class="identity">
            <img :src="tbimg" alt="" style="width:100%;height:100%;">
          </div>
          <span>淘宝淘气值</span>
        </div>
        <van-uploader v-show="tbload=='BEFORELOAD'" :max-count="1" :after-read="afterReadTb" :before-read="beforeReadTb">
          <div class="identity bm"></div>
				  <span>淘宝淘气值</span>
        </van-uploader>
      </div>
		</div>
		<div class="content">
      <!-- <van-field v-model="usernumber" label="身份证号" placeholder="请拍照识别身份证号"/> -->
      <van-field v-model="username" label="姓名" placeholder="请输入真实姓名"/>
<!--      <van-field v-model="usernumber" center clearable label="身份证号" placeholder="请输入身份证号码">-->
<!--        <template #button>-->
<!--          <van-button :loading="btnload" slot="button" size="small" type="info" @click="onCheck">校验</van-button>-->
<!--        </template>-->
<!--      </van-field>-->
<!--      <van-field v-model="userbirth" readonly label="身份证生日" placeholder="校验获取"/>-->
<!--      <van-field v-model="useraddress" readonly label="身份证地址" placeholder="校验获取"/>-->
      <van-field v-model="userzfb" label="支付宝帐号" placeholder="请输入支付宝帐号"/>
      <van-field readonly clickable name="picker" :value="userjob" label="职业" placeholder="请选择职业" @click="showPicker = true"/>
      <van-popup v-model="showPicker" position="bottom">
        <van-picker show-toolbar :columns="columns" @confirm="onJobs" @cancel="showPicker = false"/>
      </van-popup>
      <van-field v-model="usertbname" label="淘宝会员名" placeholder="请输入淘宝会员名"/>
      <van-field v-model="usernaughty" type="digit" label="淘宝淘气值" placeholder="请输入淘宝淘气值"/>
      <van-field v-model="usercode" label="邀请码" placeholder="请输入邀请码"/>
      <van-field v-model="userpass" type="password" label="操作密码" placeholder="操作密码(涉及金钱等)"/>
      <van-field v-model="userphone" type="tel" label="手机号" placeholder="请输入手机号"/>
      <van-field v-model="usersms" center clearable label="短信验证码" placeholder="请输入短信验证码">
        <van-button slot="button" size="small" type="info" :disabled="disabled" @click="onMessage">{{btnTitle}}</van-button>
      </van-field>
      <div class="submit">
        <van-button type="primary" block @click="onSubmit" color="#4b7ee9">提交</van-button>
      </div>
		</div>
  </div>
</template>

<script>
import { imagerecognition,perfectuserinfo,sendcode,idcode_Info } from '../api/api';
import aestool from '@/utils/aestool.js';
import axios from 'axios';
export default {
  data(){
    return{
			username:'',
      usernumber:'',
      userbirth:'',
      useraddress:'',
			userzfb:'',
      userphone:'',
      usersms:'',
			userjob:'',
			usertbname:'',
			usercode:'',
      usernaughty:'',
      userpass:'',
      sfzload:'BEFORELOAD',
      tbload:'BEFORELOAD',
      sfzimg:'',
      tbimg:'',
      btnTitle:"获取验证码",
      disabled:false,
      columns: ['学生', '自由职业', '待业', '家庭主妇', '工薪族', '务农', '管理人才', '技术人才', '工人', '宝妈', '销售', '客服', '工程', '个体户', '会计', '文员', '检验员', '其他'],
      showPicker: false,
      btnload:false,
    }
  },
  // created(){
  //   var a = aestool.encrypt('欢迎登陆','qwe1asd2zxc3')
  //   var b = aestool.decrypt(a,'qwe1asd2zxc3')
  //   console.log('加密后',a)
  //   console.log('解密后',b)
  // },
  methods:{
    onJobs(value) {
      this.userjob = value;
      this.showPicker = false;
    },
    //身份证校验
    onCheck(){
      if(this.username == ''){
        this.$toast('姓名不能为空！')
      }else if(this.usernumber == ''){
        this.$toast('身份证号不能为空！')
      }else{
        this.btnload = true
        let params = {
          username:aestool.encrypt(this.username,'IdcodeInfo265506'),
          card_number:aestool.encrypt(this.usernumber,'IdcodeInfo265506')
        }
        idcode_Info(params).then(res=>{
          console.log('校验',res)
          this.btnload = false
          if(res.Status == 200){
            this.userbirth = res.Data.birthday
            this.useraddress = res.Data.area
          }
        })
      }
    },
    //身份证上传之前
    beforeReadSfz(file){
      console.log('file',file)
      if (file.type.indexOf("image") == -1) {
        this.$toast('请上传正确的图片格式');
        return false;
      }
      return true;
    },
    //淘宝值上传之前
    beforeReadTb(file){
      if (file.type.indexOf("image") == -1) {
        this.$toast('请上传正确的图片格式');
        return false;
      }
      return true;
    },
    //身份证上传
    afterReadSfz(file) {
      this.sfzload = 'LOADING'
      this.uploadsfz(file.file)
    },
    //淘宝值上传
    afterReadTb(file) {
      this.tbload = 'LOADING'
      this.uploadtb(file.file)
    },
    uploadsfz(file){
      let params = new FormData()
      params.append('file', file)
      let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
      return new Promise((resolve, reject) => {
        axios.post('api/v1/register/imagerecognition', params, config).then(res => {
          this.sfzload = 'AFTERLOAD'
          console.log('身份证',res)
          if(res.data.Status == 200){
            this.$toast('上传成功')
            this.sfzimg = res.data.UrlImg
            this.username = res.data.Data.response.Name
            this.usernumber = res.data.Data.response.IdNum
            this.userbirth = res.data.Data.response.Birth
            this.useraddress = res.data.Data.response.Address
          }else{
            this.$toast(res.data.Message)
            this.sfzload = 'BEFORELOAD'
          }
        })
      })
    },
    uploadtb(file){
      let params = new FormData()
      params.append('file', file)
      let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
      return new Promise((resolve, reject) => {
        axios.post('api/v1/register/tbimageRecognition', params, config).then(res => {
          console.log('上传',res)
          this.tbload = 'AFTERLOAD'
          if(res.data.Status == 200){
            this.$toast('上传成功')
            this.tbimg = res.data.UrlImg
            console.log('this.tbimg',this.tbimg)
          }else{
            this.$toast(res.data.Message)
            this.tbload = 'BEFORELOAD'
          }
        })
      })
    },
    onSubmit(){
      if(this.username == '') {
        this.$toast('姓名不能为空！')
      }else if(this.usernumber == ''){
        this.$toast('身份证号不能为空！')
      }else if(this.userbirth == ''){
        this.$toast('身份证生日不能为空！')
      }else if(this.useraddress == ''){
        this.$toast('身份证地址不能为空！')
      }else if(this.userzfb == ''){
        this.$toast('支付宝账号不能为空！')
      }else if(this.userphone == ''){
        this.$toast('手机号不能为空！')
      }else if(this.userjob == ''){
        this.$toast('职业不能为空！')
      }else if(this.usertbname == ''){
        this.$toast('淘宝会员名不能为空！')
      }else if(this.usercode == ''){
        this.$toast('邀请码不能为空！')
      }else if(this.usernaughty == ''){
        this.$toast('淘气值不能为空！')
      }else if(this.userpass == ''){
        this.$toast('操作密码不能为空！')
      }else if(this.sfzimg == ''){
        this.$toast('身份证图片不能为空！')
      }else if(this.tbzimg == ''){
        this.$toast('淘宝淘气值图片不能为空！')
      }else if(this.usersms == ''){
        this.$toast('短信验证码不能为空！')
      }else{
        let params={
          Password:this.userpass,
          Invitation:this.usercode,
          Alpay:this.userzfb,
          Jobs:this.userjob,
          t_name:this.username,
          Idcard:this.usernumber,
          taobao_name:this.usertbname,
          Phone:this.userphone,
          code:this.usersms,
          birth:this.userbirth,
          address:this.useraddress,
          tb_value:Number(this.usernaughty),
          idcode_img:this.sfzimg,
          last_code:'1',
          tb_img:this.tbimg
        }
        perfectuserinfo(params).then(res=>{
          console.log('提交',res)
          if(res.Status == 200){
            this.$toast('提交成功！')
            this.$router.push('/mine')
          }else{
            this.$toast(res.Message)
          }
        })
      }
    },
    //发送验证码
    onMessage(){
      //判断输入的手机号是否合法
      if(!this.userphone) {
        this.$toast("手机号码不能为空")
      } else if(!/^1[3456789]\d{9}$/.test(this.userphone)) {
        this.$toast("请输入正确的手机号")
      }else{
        //倒计时
        let time = 60;
        let timer = setInterval(() => {
          if(time == 0) {
            clearInterval(timer);
            this.disabled = false;
            this.btnTitle = "获取验证码";
          } else {
            this.btnTitle =time + '秒后重试';
            this.disabled = true;
            time--
          }
        },1000)
        let params = {
          phone:aestool.encrypt(this.userphone,'123456asdzxcqwe0')
        }
        sendcode(params).then(res=>{
          console.log('验证码',res)
          if(res.Status == 200){
            this.$toast('发送成功！')
          }else{
            this.$toast(res.Message)
          }
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.uploadImg{
  height 100%
  font-size 12px
  .identity{
		width 100%
		height 120px
		margin-bottom 10px
	}
  .loadTb{
    background url(../assets/img/loading.gif) no-repeat top center
		background-size cover
  }
	.zm{
		background url(../../static/img/sfz_1.jpg) no-repeat top center
		background-size cover
	}
	.bm{
		background url(../../static/img/tqz.jpg) no-repeat top center
		background-size cover
	}
	.uploadimg{
		display flex
		justify-content space-around
		align-items center
		padding 20px 0
		background #f4f4f4
		.same{
			width 46%
			text-align center
			font-size 16px
			color #656565
		}
	}
	.tips{
		background #fcfbe9
		line-height 32px
		text-align center
		font-size 14px
		color #33322e
	}
	.submit{
		margin:18px;
	}
}
</style>
<style lang="stylus">
.uploadImg
  width 100%
  .van-uploader
    width 100%
    .van-uploader__input-wrapper
      width 100%

</style>

